<template>
  <view class="index-wrap">
    <!-- 自定义状态栏 -->
    <bar-box
      :showSkeleton="showSkeleton"
      :regionName="regionName"
      @listenSelectAreaOpen="areaSelectShow = true"
    />

    <view :style="customStyle">
      <!-- 骨架UI-接口前展示 -->
      <skeleton-component v-if="showSkeleton || !regionId" />

      <view v-if="!showSkeleton && regionId">
        <!-- 品牌区 --->
        <view class="brand-area">
          <image class="brand-img" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/brank.png" />
        </view>

       <!-- 服务网格布局 -->
       <view class="service-grid">
          <view class="grid-title">
            <text>常用服务</text>
          </view>

          <view class="grid-container">
            <!-- 楼下小店 -->
            <view class="grid-item" @tap="handleToMall(1)">
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/white-mall.png" />
              <text class="grid-text">楼下小店</text>
            </view>

            <!-- 帮拿货 -->
            <view
              class="grid-item"
              @tap="handleToRun('QUHUO')"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/mall1.png" />
              <text class="grid-text">帮拿货</text>
            </view>

            <!-- 九宫格游戏入口 -->
            <view
              class="grid-item"
              @tap="handleToGame()"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/game.png" />
              <text class="grid-text">趣味九宫格</text>
            </view>

            <!-- AI命理 -->
            <view
              class="grid-item"
              @tap="handleToPage({label: 'AI'})"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/ai-icon.png" />
              <text class="grid-text">AI助手</text>
            </view>

            <!-- 帮忙取快递 -->
            <view
              class="grid-item"
              @tap="handleToPage({
                id: 2,
                title: '帮忙取快递',
                subTitle: '取快递送上门',
                label: 'RUN',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/express.png',
              })"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/express.png" />
              <text class="grid-text">帮忙取快递</text>
            </view>

            <!-- 折扣低价区 -->
            <view
              class="grid-item"
              @tap="handleToPage({
                id: 2,
                title: '折扣低价区',
                subTitle: '成本价买卖！送货上门',
                label: 'ROAD_MALL',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/miaosha.png',
              })"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/miaosha.png" />
              <text class="grid-text">折扣低价</text>
            </view>

            <!-- 免费看书 -->
            <view
              class="grid-item"
              @tap="handleToPage({
                id: 2,
                title: '免费看书',
                subTitle: '免费看书，送货上门',
                label: 'BOOK',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/train.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/book.png',
              })"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/book.png" />
              <text class="grid-text">免费看书</text>
            </view>

            <!-- 好物免费用 -->
            <view
              class="grid-item"
              @tap="handleToPage({
                id: 2,
                title: '好物免费用',
                subTitle: '日常工具、生活用品免费用，送货上门',
                label: 'TOY',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/train.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/mall.png',
              })"
            >
              <image class="grid-icon" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/haowu.png" />
              <text class="grid-text">好物免费用</text>
            </view>
          </view>
        </view>

        <!-- 更多服务 -->
        <view class="service-promotions">
          <view class="grid-title">
            <text>特色服务</text>
          </view>
          <view class="big-treasure-box-list">
            <view
              v-for="(bigTreasureBoxInfo) in bigTreasureBoxList"
              :key="bigTreasureBoxInfo.label"
              @tap="handleToPage(bigTreasureBoxInfo)"
              class="big-treasure-box"
            >
              <view class="box">
                <image class="box-bg" :src="bigTreasureBoxInfo.bgImg" />
                <view class="box-content">
                  <image class="box-icon" :src="bigTreasureBoxInfo.icon"/>
                  <view class="text">
                    <view class="title">{{bigTreasureBoxInfo.title}}</view>
                    <view class="sub-title">{{bigTreasureBoxInfo.subTitle}}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <view class="bottom-area">
          <image class="bottom-img" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/bottom-banner.png" />
        </view>
         <view class="bottom-service">
          <image class="bottom-service-img" src="https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/wx-qun.png" />
          <text lines="1" class="bottom-service-text">有问题，可扫码入群咨询</text>
          <text lines="1" class="bottom-service-kouhao">安全准时，省心便捷，找齐全解决！</text>
        </view>
        <view class="bottom">
          <button @click="handleToCall('19817438101')" class="bottom-button"></button>
          <text lines="1" decode="true" class="bottom-time">服务时间&nbsp;8:00-18:00</text>
        </view>

        <!-- 由配置的banner产生，暂时屏蔽 -->
        <!-- banner位 -->
        <!-- <banner-box
          :list="bannerList"
          @handleToDetail="handleToDetail"
        /> -->
      </view>
    </view>
 <!-- 弹窗——区域选择 -->
 <!-- <view v-if="regionList.length!==1"> -->
  <view>
    <area-select-popup
      :show.sync="areaSelectShow"
      :list="regionList"
      :regionId="regionId"
      @listenSelectArea="listenSelectArea"
    />
 </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
import {
  USER_INFO,
  AREA_LIST,
  GET_AREA_BY_NAME,
  GET_AREA_BY_HOLE_NAME,
  SERVICE_AREA_BY_LEVEL,
  SERVICE_AREA_BY_PID,
  AREA_BIND_USER,
  ATTACHMENT_BANNER,
  UNREAD,
  ERRAND_FEE,
  MSG_SUBSCRIBE
} from "@/api";
import bannerBox from "./components/banner-box.vue";
import barBox from "../../components/bar-box.vue";
import areaSelectPopup from "./popup-components/area-select-popup.vue";
import skeletonComponent from "./skeleton-component/index.vue";
// import md5 from 'js-md5';
export default {
  components: {
    barBox,
    bannerBox,
    skeletonComponent,
    areaSelectPopup,
  },
  computed: {
    ...mapState({
      statusBarHeight: (state) => state.cms.statusBarHeight,
      gap: (state) => state.cms.gap,
    }),
    customStyle() {
      const paddingTop = this.statusBarHeight + 2 * this.gap + 7 + 30;
      return `padding-top: ${paddingTop}px;`;
    },
  },
  data() {
    return {
      current: 0,
      treasureBoxList: [

        {
          label: "COUPON",
          name: "帮拿货",
          icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/mall1.png'
        }
      ],
      bigTreasureBoxList: [],
      // banner
      bannerList: [],

      // 区域
      regionId: 0,
      regionName: "",
      regionList: [],
      ownRegionList: [],
      userType: "",

      // 未读消息
      readMsg: {},
      street: "",
      // 弹窗
      areaSelectShow: false,
      btnLoad: false,
      getLocation:true,

      // 骨架屏
      showSkeleton: true, // 前段渲染
    };
  },
  async onLoad() {
    uni.showShareMenu();
    // if(this.getLocation){
      // console.log('getLocation---',this.getLocation);
      // await this.getCurrentLocal();
      // 区域列表
    await this.getAreaList();
    await this.getServiceVillage();
    // }
    this.getFirstPageConfig();
    await this.getBindLoginStatus();

    // 区域获取
    // try {
    //   await this.getAreaBlind();
    // } catch (e) {
    //   console.log(`${e}区域获取`);
    // }

    // 区域对应信息
    this.regionId = uni.getStorageSync("regionId");
    if (!this.regionId ) {
      this.areaSelectShow = true;
    } else {
      // 信息渲染
      await this.getAreaBindData(this.regionId);
      this.areaSelectShow = false;
    }

    this.showSkeleton = false;

    // 消息获取
    this.getMsgRead();
  },
  async onShow() {
    // await this.getCurrentLocal();
    // await  this.getAreaList();
    await this.getBindLoginStatus();
    const regionSet = uni.getStorageSync("regionSet");
    // 区域获取
    try {
      await this.getAreaBlind();
    } catch (e) {
      console.log(`${e}区域获取`);
    }
    if (regionSet) {
      // 区域对应信息
      if (!this.regionId) {
        this.areaSelectShow = true;
      } else {
        // 信息渲染
        await this.getAreaBindData(this.regionId);
      }

      this.showSkeleton = false;

      // 消息获取
      this.getMsgRead();

      // 清除数据——设置
      uni.removeStorageSync("regionSet");
    }
  },
  async onPullDownRefresh() {
    await this.getAreaBindData(this.regionId);
    // 消息获取
    this.getMsgRead();
    uni.stopPullDownRefresh();
  },
  methods: {
    getAreaBlind() {
      return new Promise((resolve) => {
        // 缓存获取
        const regionId = uni.getStorageSync("regionId");
        const regionName = uni.getStorageSync("regionName");
        const accessToken = uni.getStorageSync("accessToken");
        if (regionId && regionName && !accessToken) {
          this.regionId = regionId;
          this.regionName = regionName;
          resolve();
          return;
        }

        // 未登录
        if (!accessToken) {
          resolve();
          return;
        }

        // 已登录——接口获取
        this.$http
          .get(USER_INFO)
          .then((res) => {
            const { region, user_type } = res.data;
            this.userType = user_type;
            if (region) {
              this.regionId = region.id;
              this.regionName = region.name;
              uni.setStorageSync("regionId", region.id);
              uni.setStorageSync("regionName", region.name);
            }
            resolve();
          })
          .catch(() => {
            resolve();
          });
      });
    },
    getFirstPageConfig() {
        let params = {};
        params['key'] = 'first_page_config';
        // this.$http.get(ERRAND_FEE, params)
        //   .then(res => {
        //     if(!res.data){
              // this.bigTreasureBoxList= [];
            // }else{
              this.bigTreasureBoxList=[
              {
                id: 2,
                title: '解读医院报告',
                subTitle: '检查报告解读',
                label: 'checkReport',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/express.png',
              },{
                id: 2,
                title: 'AI命理',
                subTitle: '取快递送上门',
                label: 'AI',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/express.png',
              },{
                id: 2,
                title: '帮忙取快递',
                subTitle: '取快递送上门',
                label: 'RUN',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/express.png',
              },{
                id: 2,
                title: '折扣低价区',
                subTitle: '成本价买卖！送货上门',
                label: 'ROAD_MALL',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/cupoo-bg.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/miaosha.png',
              },
              {
                id: 2,
                title: '免费看书',
                subTitle: '免费看书，送货上门',
                label: 'BOOK',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/train.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/book.png',
              },
              {
                id: 2,
                title: '好物免费用',
                subTitle: '日常工具、生活用品免费用，送货上门',
                label: 'TOY',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/train.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/mall.png',
              },
              {
                id: 4,
                title: '家电维修/开锁',
                subTitle: '各种家电，各种门锁',
                label: 'REPAIR',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/maintain.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/maintain-icon.png',
              },{
                id: 2,
                title: '优惠券',
                subTitle: '抢优惠券',
                label: 'COUPON',
                bgImg: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/shipping.png',
                icon: 'https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/coupon.png',
              },

            ]
          },

      //   });
      // },
    getServiceVillage(){
      this.$http.get(SERVICE_AREA_BY_LEVEL, {
          level: 5
        })
        .then((res) => {
          const tmplist = res.data.concat(this.ownRegionList)|| [];
          const map = tmplist.reduce((acc, currentValue) => {
            acc.set(currentValue.id, currentValue);
            return acc;
          }, new Map());
            this.regionList=Array.from(map.values());
              // this.listenSelectArea(this.regionList[0]);
            });

    },
     getCurrentLocal(){
        let that = this;
        wx.getSetting({
          success(res) {
            if (res.authSetting['scope.userLocation'] == false){// 如果已拒绝授权，则打开设置页面
              wx.openSetting({
                success(res) {}
              })
            }  else { // 第一次授权，或者已授权，直接调用相关api
              that.getMyLocation();
            }
          }
        })
      },
    getMyLocation(){
      let that = this
      // wx.getLocation({
      //   type: 'wgs84',
      //   success:res =>{
      //     const latitude = res.latitude;
      //     const longitude = res.longitude;
      //     // let sign=md5("/ws/geocoder/v1?key=LEBBZ-3SB66-WXMS5-ESKHD-Q64K6-5ZB42&location="+`${latitude}`+","+`${longitude}`+"bIvfOtvNLTP3acYj68nCfUghMsRKu4")
      //     wx.request({
      //       url: 'https://restapi.amap.com/v3/geocode/regeo',
      //       data: {
      //         key: '7ce55377fa2d73a22d44536d00016d5f',
      //         location: `${longitude},${latitude}`,
      //       },
      //       success(res) {
      //         const addressComponent = res.data.regeocode.addressComponent;
      //         const province = addressComponent.province;
      //         const city = addressComponent.city;
      //         const district = addressComponent.district;
      //         const street=addressComponent.township;
      //         that.street=street;
      //         // that.regionName= street;
      //         console.log('tmplist--11--', province+'，'+city+'，'+district+'，'+street);
      //         that.$http
      //           .get(GET_AREA_BY_HOLE_NAME, {
      //             name: province+'，'+city+'，'+district+'，'+street
      //           })
      //           .then((res) => {
      //             const regionList = res.data || []
      //             console.log('tmplist--222--',res.data);
      //               const region=regionList[0];
      //               uni.setStorageSync("parentAreaId", region.id);
      //                 // that.listenSelectArea(region);
      //                 that.$http
      //                   .get(SERVICE_AREA_BY_PID, {
      //                     parentId: region.id,
      //                   })
      //                   .then((res1) => {
      //                     console.log('tmplist--222--',res1.data);
      //                     const tmplist = res1.data.concat(that.ownRegionList)|| [];

      //                     const map = tmplist.reduce((acc, currentValue) => {
      //                     acc.set(currentValue.id, currentValue);
      //                     return acc;
      //                   }, new Map());
      //                   that.regionList=Array.from(map.values());
      //                     console.log('that.regionList--1111----',that.regionList);
      //                     that.listenSelectArea(that.regionList[0]);
      //                   });
      //           });

      //       }
      //     })
      //   }
      // })
    },
    getAreaList() {
      this.$http
        .get(AREA_LIST, {
          per_page: 100,
        })
        .then((res) => {
          this.ownRegionList = res.data || [];
          console.log('this.regionList---',this.regionList);
        });
    },
    getAreaByName(){
      this.$http
        .get(GET_AREA_BY_NAME, {
          name: this.street,
        })
        .then((res) => {
          this.regionList = res.data || [];
          console.log('this is into -----',res);
          if(this.regionList.length===1){
            const region=this.regionList[0];
              this.listenSelectArea(region);
              uni.setStorageSync("regionId", region.id);
              uni.setStorageSync("regionName", region.name);
          }
        });
    },
    handleToCall(str) {
      uni.makePhoneCall({
        phoneNumber: str,
      });
    },
    listenSelectArea(item) {
      // 区域选择
      // 相同选择和上次,不处理
      console.log(item,'----');
      uni.setStorageSync("regionId", item.id);
      uni.setStorageSync("regionName", item.name);
      uni.setStorageSync("parentAreaId", item.parent_id);
      if (this.regionId === item.id) {
        this.areaSelectShow = false;
        return;
      }
      this.regionId = item.id;
      this.regionName = item.name;

      this.areaSelectShow = false;
      // 首页数据更新
      this.getBannerData(item.id);

      // 消息获取
      this.getMsgRead();

      // 数据库记录
      const accessToken = uni.getStorageSync("accessToken");
      if (accessToken) {
        this.setUserBindArea(item);
      }
    },
    setUserBindArea(item) {
      // 区域绑定
      if (this.btnLoad) {
        return;
      }
      this.btnLoad = true;
      this.$http
        .post(
          AREA_BIND_USER,
          {
            region_id: item.id,
          },
          {
            showLoading: true,
          }
        )
        .then(() => {
          this.btnLoad = false;
        })
        .catch(() => {
          this.btnLoad = false;
        });
    },
    getAreaBindData(region_id) {
      // 区域——信息展示
      // 首页banner获取
      this.getBannerData(region_id);
    },
    getBannerData(region_id) {
      this.$http
        .get(ATTACHMENT_BANNER, {
          region_id,
          is_banner: 1,
        })
        .then((res) => {
          this.bannerList = res.data;
        });
    },
    handleToDetail(item) {
      const type = item.post_type_label;
      this.$navigate({
        page: "detail",
        params: {
          id: item.id,
          type,
        },
      });
    },
    handleToRun(runType) {
      const accessToken = uni.getStorageSync("accessToken");
      if (!accessToken) {
        this.$navigate({
          page: "login",
        });
        return;
      }

      const regionId = uni.getStorageSync("regionId");
      if (!regionId) {
        uni.showToast({
          title: "请先绑定区域，才能发布跑腿",
          icon: "none",
        });
        return;
      }

      // 跑腿人员禁止发单
      if (this.userType === 3) {
        uni.showToast({
          title: "跑腿人员无权限，请切换角色后进入",
          icon: "none",
        });
        return;
      }
      if(runType==='RUN'){
        this.$navigate({
          page: "runPublish",
        });
      }else if(runType==='QUHUO'){
        this.$navigate({
          page:"runQuhuo",
        });
      }

    },
    handleToMall(shop_type){
      getApp().globalData.shop_type = shop_type;
      if(shop_type===4){
        this.$navigate({
          page: 'good',
          params: {
            id: 46313,
            name: '折扣低价店',
            shopType: 4,
          },
        });
      }else if(shop_type===2){
        this.$navigate({
          page: 'good',
          params: {
            id: 46312,
            name: '好物免费用',
            shopType: 2,
          },
        });
      }else if(shop_type===3){
        this.$navigate({
          page: 'good',
          params: {
            id:     我们4,
            name: '社区图书角',
            shopType: 3,
          },
        });
      }else{
        this.$navigate({
          page: "commonShopList",
          params: {
            shopType: shop_type
          },
          type: 1
        });
    }
    },
    handleToToy(){
      this.$navigate({
        page: 'good',
        params: {
          id: item.id,
          name: item.shop_name,
        },
      });
    },
    handleToCoupon() {
      const accessToken = uni.getStorageSync("accessToken");
      if (!accessToken) {
        this.$navigate({
          page: "login",
        });
        return;
      }

      this.$navigate({
        page: "coupon",
      });
    },
    subscribeMessage() {
      var _this = this;
      return new Promise((resolve) => {
        try {
          uni.requestSubscribeMessage({
            tmplIds: ["9FVZNmcy1cBtGdROY6DZRRxgXN7JsTlwzuTxnAZMLEg"],
            success(res) {
              resolve(true);
              const acceptArr = [];
              ["9FVZNmcy1cBtGdROY6DZRRxgXN7JsTlwzuTxnAZMLEg"].forEach(
                (item) => {
                  if (res[item] === "accept") {
                    acceptArr.push(item);
                  }
                }
              );
              if (acceptArr.length) {
                _this.sendUserMsg();
              }
            },
            fail() {
              resolve(true);
            },
          });
        } catch (e) {
          resolve(true);
        }
      });
    },
    /**
     * 同意订阅
     */
    async sendUserMsg() {
      const code = await this.getWxCode();
      this.$http
        .post(MSG_SUBSCRIBE, {
          code,
        })
        .then(() => {
          // 一天一次
          const time = new Date();
          const year = time.getFullYear();
          const month = time.getMonth();
          const day = time.getDate();
          uni.setStorageSync("subscribeMessage", `${year}-${month}-${day}`);

          uni.showToast({
            title: "订阅成功",
            icon: "none",
          });
        });
    },
    getWxCode() {
      // 获取微信code
      return new Promise((resolve) => {
        wx.login({
          success: (res) => {
            resolve(res.code);
          },
        });
      });
    },
    /**
     * 信息模块跳转
     */
    async handleToPage(treasureBoxInfo) {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth();
      const day = time.getDate();

      const date = `${year}-${month}-${day}`;
      const subscribeMessage = uni.getStorageSync("subscribeMessage");
      if (date !== subscribeMessage) {
        // 先行订阅
        await this.subscribeMessage();
      }

      if (treasureBoxInfo.label === "COUPON") {
        this.handleToCoupon();
      } else if (treasureBoxInfo.label === "ERRAND") {
        this.handleToRun('RUN');
      } else if (treasureBoxInfo.label === "RUN") {
        this.handleToRun('RUN');
      } else if (treasureBoxInfo.label === "MALL") {
        this.handleToMall(1);
      }else if (treasureBoxInfo.label === "TOY") {
        this.handleToMall(2);
      }else if (treasureBoxInfo.label === "BOOK") {
        this.handleToMall(3);
      }else if (treasureBoxInfo.label === "ROAD_MALL") {
        this.handleToMall(4);
      }else if (treasureBoxInfo.label === "AI") {
        this.$navigate({
          page: "aiChat",
          type:1
        });
      }else if(treasureBoxInfo.label === 'checkReport' ){
        this.$navigate({
          page: "checkReport",
          type:1
        });
      }else if(treasureBoxInfo.label === 'SHIPPING' ){
        uni.showToast({
          title: '正在开发',
          icon: 'none',
        });
      }else {
        this.$navigate({
          page: "list",
          params: {
            curId: treasureBoxInfo.id,
            type: treasureBoxInfo.label,
          },
        });
      }
    },
    /**
     * 消息读取
     */
    getMsgRead() {
      let params = {};
      params["region_id"] = this.regionId;
      params["post_type"] = [
        "NOTICE",
        "ACTIVITY",
        "CAR",
        "REPAIR",
        "TRAIN",
        "OTHER",
        "COUPON",
        "ERRAND",
      ];
      params["time"] = parseInt(new Date().getTime() / 1000);
      this.$http.get(UNREAD, params).then((res) => {
        this.readMsg = res.data;
      });
    },
    handleToGame() {
      try {
        console.log('准备跳转到游戏页面');
        // 使用 this.$navigate 进行跳转
        this.$navigate({
          page: "jggGame",
          type: 1
        });
      } catch(err) {
        console.error('游戏页面跳转异常:', err);
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        });
      }
    },
  },
};
</script>

<style lang="less">
.index-wrap {
  .brand-area {
    background-image: linear-gradient(#FFF27C, #F9F9F5);
    padding: 0 30rpx;
    .brand-img {
      width: 100%;
      height: 324rpx;
    }
  }
  .bottom-area {
    background-image: linear-gradient(#FFF27C, #F9F9F5);
    margin: 10rpx 0 0 29rpx;
    width: 690rpx;
    .bottom-img {
      width: 100%;
      height: 160rpx;
    }
  }
  button::after {
    border: none;

  }
  .bottom{
    width: 100%;
    height: 82rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 46rpx 0 10rpx 15rpx;
    .bottom-button{
      width: 282rpx;
      height: 70rpx;
      display: flex;
      flex-direction: column;
      background-image: url('https://zhaoqi.oss-cn-hangzhou.aliyuncs.com/wx/home/service-phone.png');
      background-repeat: no-repeat;
    }
    .bottom-time{
      width: 192rpx;
      height: 20rpx;
      overflow-wrap: break-word;
      color: rgba(153,153,153,1);
      font-size: 20rpx;
      font-family: PingFang-SC-Regular;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      line-height: 28rpx;
      margin: 0rpx 0 0 265rpx;
    }
  }
  .bottom-service {
    width: 175rpx;
    height: 206rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 30rpx 0 0 285rpx;
    .bottom-service-img {
      width: 150rpx;
      height: 150rpx;
      margin-left: 14rpx;
    }
    .bottom-service-text{
      width: 175rpx;
      height: 17rpx;
      overflow-wrap: break-word;
      color: rgba(153,153,153,1);
      font-size: 16rpx;
      font-family: PingFang-SC-Regular;
      font-weight: normal;
      text-align: center;
      white-space: nowrap;
      line-height: 1rpx;
      margin-top: 9rpx;
    }
    .bottom-service-kouhao{
      width: 367rpx;
      height: 14rpx;
      overflow-wrap: break-word;
      color: rgba(153,153,153,1);
      font-size: 24rpx;
      font-family: SourceHanSansCN-Medium;
      font-weight: 500;
      text-align: center;
      white-space: nowrap;
      line-height: 30rpx;
      margin: 0rpx 0 0 -80rpx;
    }
  }
  .treasure-box-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top:20rpx;
    padding-left:0rpx;
    padding-right:30rpx;
    .treasure-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .icon-img {
        width: 118rpx;
        height: 118rpx;
      }
      .treasure-box-text {
        font-size: 26rpx;
      }
    }
  }
  .view-flext{
    display: flex;
    width:100%;
    padding-bottom:20rpx;
  }
  .expressage-row {
    padding-left: 30rpx;
    padding-right:20rpx;
    margin:0rpx 1rpx 0rpx 0rpx;
    position: relative;
    height: 150rpx;
    float:flext;
    margin-top: 24rpx;
    margin-right: 0rpx;
    width:90%;
    .expressage-bg {
      width: 100%;
      height:90%;
    }
    .expressage-content {
      position: absolute;
      left: 54rpx;
      right: 97rpx;
      top: 0;
      bottom: 0;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .left-part {
        display: flex;
        flex-direction: row;
        align-items: center;
        .trucks-icon {
          width: 70rpx;
          height: 70rpx;
        }
        .text {
          margin-left: 30rpx;
          .title {
            font-size: 28rpx;
            color: #fff;
            font-weight: bold;
            margin-bottom: 8rpx;
          }
          .sub-title {
            font-size: 20rpx;
            color: rgba(255, 255, 255, 0.6);
          }
        }
      }
      .btn {
        width: 204rpx;
        height: 64rpx;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #DD8303;
        background-color: #fff;
        border-radius: 32rpx;
        font-weight: bold;
      }
    }
  }

  .big-treasure-box-list {
    padding-top:20rpx;
    padding-left:30rpx;
    padding-right:0rpx;
    padding-top:0rpx;
    display: flex;
    flex-wrap: wrap;
    margin-right: 0rpx;
    .big-treasure-box {
      width: 50%;
      height: 150rpx;
      margin-bottom: 24rpx;
      &:nth-child(odd) {
        padding-right: 12rpx;
      }
      &:nth-child(even) {
        padding-left: 12rpx;
      }
      .box {
        position: relative;
        width: 100%;
        height: 100%;
        .box-bg{
          width: 100%;
          height: 100%;
        }
        .box-content {
          position: absolute;
          left: 24rpx;
          top: 0;
          bottom: 0;
          display: flex;
          flex-direction: row;
          align-items: center;
          .box-icon {
            width: 70rpx;
            height: 70rpx;
          }
          .text {
            margin-left: 30rpx;
            margin-top: -6rpx;
            .title {
              font-size: 28rpx;
              color: #000;
              font-weight: bold;
              margin-bottom: 8rpx;
            }
            .sub-title {
              font-size: 20rpx;
              color: rgba(0, 0, 0, 0.4);
            }
          }
        }
      }
    }
  }

  .service-grid {
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    margin-top: 20rpx;
    border-radius: 12rpx;
    
    .grid-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333;
    }
    
    .grid-container {
      display: flex;
      flex-wrap: wrap;
      
      .grid-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20rpx 0;
        
        .grid-icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 10rpx;
        }
        
        .grid-text {
          font-size: 24rpx;
          color: #333;
          text-align: center;
        }
      }
    }
  }
  
  .service-promotions {
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    margin-top: 20rpx;
    border-radius: 12rpx;
    
    .grid-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333;
    }
  }
}
</style>